<template>
  <div class="main-container">
    <div class="title-con">
      <div class="title-text">AI视觉动作识别</div>
    </div>
    <div class="videosbox">
      <div class="left-video">
        <!--<l-vue3-video :videoSrc="videoSrc" :isautoplay="isautoplay" :posterSrc="posterSrc" :closeVideo="closeVideo">
        </l-vue3-video>-->
        <!-- <iframe ref="iiframe" :src="iframeUrl" scrolling="no" frameborder="0" title="videoFrame" class="video-iframe" id="bi-iframe" @load="onLoad"></iframe> -->
         <div class="left-top"></div>
         <div class="left-bottom"></div>
      </div>
      <div class="middle-video">
        <div class="middle-top"></div>
        <div class="middle-center"></div>
        <div class="middle-bottom"></div>
      </div>
      <div class="right-meta">
        <div class="top-any">
          <div class="statistics-column">
            <div class="dot">
              <div class="breathing-background"></div>
            </div>
            <div style="padding-left: 10px;">统计栏</div>
          </div>
          <div class="split"></div>
          <div class="statistics-info">
            <div>
              <span class="statistics-title">工序号:</span>
              <span class="statistics-con">{{rightdatas.station}}</span></div>
            <div>
              <span class="statistics-title">序列号:</span>
              <span class="statistics-con">{{rightdatas.barcode}}</span>
            </div>
          </div>
          <div class="content" v-if="rightdatas.data?.length > 0">
            <vue3-seamless-scroll hover-stop="true" :hover="true" :step="0.2" :limitScrollNum="4" :list="rightdatas.data" class="scroll" v-if="rightdatas.data?.length > 0">
              <div class="item" v-for="(item, index) in rightdatas.data" :key="index">
                <div class="statics-top">
                  <!-- <div class="statics-text">{{ index + 1 }}</div> -->
                  <div class="statics-text" style="color:rgb(162, 202, 250);font-weight:bold;width:70%;">{{ item.name }}</div>
                  <div class="statics-text" style="width:30%;">{{ item.stepCheckResult }}</div>
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
        <div class="bottom-any">
          <div class="statistics-column">
            <div class="dot">
              <div class="breathing-background"></div>
            </div>
            <div style="padding-left: 10px;">NG统计</div>
            <div style="font-size:13px;color:#dd4b39;font-weight:normal;">{{ '（计' + (rightdatas.NG?.length > 0 ? rightdatas.NG?.length : 0) + '条）'}}</div>
          </div>
          <div class="split"></div>
          <div class="content" v-if="rightdatas.NG?.length > 0">
            <vue3-seamless-scroll hover-stop="true" :hover="true" :step="0.2" :limitScrollNum="4" :list="rightdatas.NG"
              class="scroll" v-if="rightdatas.NG?.length > 0">
              <div class="item" v-for="(item, index) in rightdatas.NG" :key="index">
                <div class="statics-bottom">
                  <div class="barcode-con">
                    <div class="title-dot"></div>
                    <div>
                      <span class="barcode-title">序列号:</span>
                      <span class="barcode-num">{{item.barcode }}</span>
                    </div>
                  </div>
                  <div class="error-desc">{{ item.error_message }}</div>
                  <div class="error-time">{{ item.time }}</div>                  
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { computed, watch, onUnmounted,onMounted, inject } from 'vue'
import { useStore } from 'vuex';
import moment from 'moment'
import lVue3Video from "../package/lvideo.vue"
import { getAssetsResource } from '../utils/CommonFun.js'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import useWebSocket from '../api/useWebSocket.js';
// https://sdk-release.qnsdk.com/VID_20220207_144828.mp4
//https://media.w3.org/2010/05/sintel/trailer.mp4
// rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid

// http://cdn3.toronto360.tv:8081/toronto360/hd/playlist.m3u8
//失败测试
// https://sdk-release.qnsdk.com/1080_60_5390.mp4


const videoSrc = ref('http://127.0.0.1:5000/')
// const videoSrc = ref('rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid')
// const videoSrc = ref('https://media.w3.org/2010/05/sintel/trailer.mp4')
// const videoSrc = ref('/src/assets/images/test2.mp4')
const isautoplay = ref(false)//是否自动播放
const posterSrc = ref(getAssetsResource('bg.jpg'))
const store = useStore()
const closeVideo = ref(false)
/* 头部日期 */
const nowDate = ref(null)
const rightdatas = ref({})
const dateTimer = setInterval(() => {
  nowDate.value = moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
const iiframe = ref(null)
const videoHeight = ref(null)
const videoWidth = ref(null)
const iframeUrl = ref("")
const message = ref('');
const { socket, isConnected, sendMessage } = useWebSocket(
  'ws://10.57.104.19:8082/websocket',
  {
    reconnectInterval: 3000,
    maxReconnectAttempts: 5,
  }
);
const weekDay = computed(() => {
  let day = ''
  switch (moment().day()) {
    case 0:
      day = '星期日'
      break
    case 1:
      day = '星期一'
      break
    case 2:
      day = '星期二'
      break
    case 3:

      day = '星期三'
      break
    case 4:

      day = '星期四'
      break
    case 5:

      day = '星期五'
      break
    case 6:

      day = '星期六'
      break
  }
  return day
})
//关闭销毁vodeo
const closeVideos = () => {
  closeVideo.value = true
  isautoplay.value = false
}
onUnmounted(() => {
  clearInterval(dateTimer)
    // 发送消息
    sendMessage();
})
watch(
  () => iiframe.value,
  (val) => {
    if(val){
      console.log('获取他的宽高',val.clientHeight,val.clientWidth)
      iframeUrl.value = "http://127.0.0.1:5000/video?size=" + val.clientWidth + "x" + val.clientHeight
    }
  }
)
watch(
  () => store.getters.dataObj,
  (val) => {
    if(val){
      rightdatas.value = JSON.parse(val)
      // console.log('I got U',rightdatas.value)
    }
  }
)
</script>
<style lang="scss" scoped>
.main-container {
  display: grid;
  grid-template-rows: 12% 88%;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local;
  width: 100%;
  height: 100%;
  overflow:auto;  
  min-height: 980px;

  .title-con {
    align-items: center;
    width: 94%;
    margin: auto;

    .title-text {
      text-align: center;
      padding-right:6%;
      padding-bottom:1%;
      margin:auto;
      font-family: 'DS-DIGIT';
      font-size: 38px;
      color: rgb(182, 213, 250);
      text-shadow: rgb(255, 255, 255) 0px 0px 1px;
      font-weight: normal;
      //justify-content: center;
      align-items: center;
    }

    .current-time {
      color: rgb(162, 202, 250);
      font-size: 16px;
    }

    .person-info {
      margin: inherit;

      .right-menu-item {
        display: flex;
        align-items: center;
        padding: 0 8px;
        height: 100%;
        font-size: 20px;
        vertical-align: text-bottom;
        color: rgb(162, 202, 250);

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }

        :focus-visible {
          outline: none;
        }
      }
    }
  }

  .videosbox {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 20% 60% 20%;

    .left-video{
      // 16:9
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: 50% 50%;
      // margin: auto;
      // .video-iframe{
      //   height: 731.25px;
      //   width: 1300px;
      // }
      .left-top{
        width: 100%;
        height: 100%;
        background-color: #dd4b39;
      }
      .left-bottom{
        width: 100%;
        height: 100%;
        background-color: aqua;
      }
    }
    .middle-video{
      display: grid;
      grid-template-rows: 15% 70% 15%;
      .middle-top{
        width: 100%;
        height: 100%;
        background-color: green;
      }
      .middle-center{
        width: 100%;
        height: 100%;
        background-color: yellow;
      }
      .middle-bottom{
        width: 100%;
        height: 100%;
        background-color: gray;
      }
    }
    .right-meta {
      display: grid;
      grid-template-rows: 55% 45%;

      .top-any {
        background-image: url('@/assets/images/bg_data.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        width: 400px;
        height: 370px;
        margin: auto;

        .statistics-info {
          font-size: 20px;
          color: rgb(162, 202, 250);
          text-shadow: rgb(255, 255, 255) 0px 0px 1px;
          font-weight: normal;
          margin: 0 10px;
          height:80px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .statistics-title{
            font-weight:bold;
            font-size: 16px;
          }
          .statistics-con{
            padding-left:5px;
            font-size: 16px;
          }
        }

        .statistics-column {
          // font-family: 'FZZongYi-M05S, Arial, sans-serif';
          font-size: 20px;
          color: rgb(162, 202, 250);
          text-shadow: rgb(255, 255, 255) 0px 0px 1px;
          font-weight: bold;
          margin: 10px 40px;
          display: flex;
        }
      }

      .bottom-any {
        background-image: url('@/assets/images/bg_report.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        width: 400px;
        height: 310px;
        margin: auto;

        .statistics-column {
          // font-family: 'FZZongYi-M05S, Arial, sans-serif';
          font-size: 20px;
          color: rgb(162, 202, 250);
          text-shadow: rgb(255, 255, 255) 0px 0px 1px;
          font-weight: bold;
          margin: 10px 20px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.split {
  background-image: url('@/assets/images/split.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 360px;
  height: 17px;
  margin: auto;
}

// // 关键css代码
// ::v-deep.el-table__header colgroup col[name="gutter"] {
//     display: table-cell !important;
// }
// ::v-deep .el-table,
// ::v-deep .el-table__expanded-cell,
// ::v-deep .el-table th,
// ::v-deep .el-table tr {
//   background-color: transparent; // 采用大屏本来的样式，自身设为透明色
//   th.gutter, colgroup.gutter {
//     display: none !important;//此处的宽度值，对应你自定义滚动条的宽度即可
//   }
// }
// ::v-deep .el-table th,
// .el-table tr {
//   // 如果要增加竖线上方加上.el-table td
//   background-color: transparent;
//   border-bottom: 1px solid #6e655f;
// }
// // 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
// ::v-deep .el-table tbody tr:hover > td {
//   background-color: transparent !important;
// }
// // 如果td没有颜色，可以去掉，这里加上保险
// ::v-deep .el-table__body tr.hover-row > td {
//   background-color: transparent;
// }
// ::v-deep .el-table th.el-table__cell.is-leaf {
//     border-bottom: none;
//   }
//   ::v-deep .el-table .el-table__header-wrapper th,
//       .el-table .el-table__fixed-header-wrapper th {
//       color: #adb1b4;
//       background-color: #05458c5c !important;
//   }
// ::v-deep .table_header {
//   color: #fff;
//   text-align: center;
// }
// ::v-deep .el-table {
//     background: none;
//     color: #fff;
//     padding: 7px;
//     height:14rem;
//     tr {
//       background-color: transparent !important;
//     }
//     &.is-scrolling-left.el-table--border {
//       .el-table-fixed-column--left.is-last-column.el-table__cell {
//         border-right-color: transparent;
//       }
//     }
//     &::before {
//       height: 0px !important;
//       background-color:transparent !important;
//     }      
//     .el-table tr {
//       background-color: transparent !important;
//     }
//     .el-table__border-left-patch {
//       background-color: transparent;
//     }
//     .el-table__header-wrapper table,
//     .el-table__body-wrapper table{
//       width: 100% !important;
//     }
//   }
//   ::v-deep.el-table td.el-table__cell,
//   .el-table th.el-table__cell.is-leaf {
//     border-bottom: none;
//   }
//   ::v-deep .el-table__inner-wrapper {
//   &::after, &::before {
//     background-color: transparent !important;
//   }
// }


.content {
  font-size: 20px;
  width: 100%;
  height: 200px;
  overflow-y: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  .item {
    width: 100%;
    // padding-left: 24px;
    padding: 0 12px;
    margin-top: 16px;

    .statics-top {
      padding-left:10%;
      color: #fff;
      display: flex;
      justify-content: space-between;
      .statics-text{
        // width:50%;
        font-size: 16px;
        // text-align:center;
      }
    }
    .statics-bottom{
      height:80px;
      display: flex;
      flex-direction:column;
      justify-content:space-around;
      // padding-left:10%;
      .barcode-con{
        display: flex;
        justify-content:space-around;
        color:rgb(162, 202, 250);
        font-weight:bold;
        width:100%;
        .title-dot{
          display: inline-block;
          width: 15px;
          height: 15px;
          border: 2px solid rgb(6, 79, 160);
          border-radius: 50%;
          background-color:rgba(69, 118, 190, 0.9);
        }
        .barcode-title{
          font-size: 16px;
        }
        .barcode-num{
          font-size: 16px;
        }
      }
      .error-desc{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        color:#dd4b39;
        font-size: 15px;
        padding-left: 6%;
      }  
      .error-time{        
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        color:rgb(162,202,250);
        font-size: 14px;
        padding-left: 6%;
      }
    }
  }
}
.dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgb(6, 79, 160);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    // animation: breathing 2s cubic-bezier(0, 0, 0.25, 1) infinite;
}
.breathing-background {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color:rgba(69, 118, 190, 0.9);
    opacity: 0.2;
    animation: breathing 2s cubic-bezier(0, 0, 0.25, 1) infinite;
}
// 动画 变大再变小
@keyframes breathing {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
</style>